<template>
  <div>
    <FullCalendar
      ref="FullCalendarRef"
      class="demo-app-calendar"
      :options="calendarOptions"
    ></FullCalendar>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineEmits } from "vue";

import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
// const prev = () => {
//   FullCalendarRef.value.getApi().prev();
// };
// const next = () => {
//   FullCalendarRef.value.getApi().next();
// };
// const prevToday = () => {
//   FullCalendarRef.value.getApi().today();
// };
//
const emit = defineEmits([`handle-cal-details`]);

const handleEventClick = () => {
  emit("handle-cal-details", true);

  console.log("发生点击事件");
};
const handleEvents = () => {
  console.log("点击事件");
};

const calendarOptions = ref({
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
  locale: "zh-cn", // 中文
  buttonText: {
    today: "当前",
    month: "月",
    week: "周",
    day: "天",
    list: "列表",
  },
  // customButtons: {
  //   today: {
  //     text: "今日",
  //     click: prevToday,
  //   },
  //   next: {
  //     text: "下个月",

  //     click: next,
  //   },
  //   prev: {
  //     text: "上个月",

  //     click: prev,
  //   },
  // },
  headerToolbar: {
    // 头显示
    // right: "dayGridMonth,timeGridWeek,timeGridDay",
    left: "",
    center: "title",
    right: "today prev,next",
  },
  firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
  events: [],
  weekNumbers: true,
  timeGridEventMinHeight: "30",
  // editable: true, //事件是否可编辑，可编辑是指可以移动, 改变大小等。
  selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
  selectEventOverlap: false,
  eventsSet: handleEvents, // 事件点击
  dayMaxEvents: true,
  eventClick: handleEventClick,
  droppable: false, //是否可拖拽
  // // loading: loading //控制表格加载
  // initialView: "dayGridMonth",
  // // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
  // editable: true, // 允许编辑表格
  droppable: false, //允许从外部拖拽进入日历
  // unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
  // selectMirror: true,
  // dayMaxEvents: true, //在dayGrid视图中，给定日期内的最大事件数
  // // headerToolbar: false, // 关闭默认日历头部，采取自定义的方式切换日历视图
  // weekends: true, // 是否显示周末，设为false则不显示周六和周日。
  // dateClick: handleClick,
  // eventResize: true,
});
const matchList = ref([]); //日历数据
const FullCalendarRef = ref(null);
const init = async () => {
  matchList.value = [];
  // const res = await getCalendarEvent({
  //   status: '', //状态
  //   bgColor: '', //背景颜色
  // });
  // let evenstList = res.map((item: any) => {
  //   item.title = item.title;
  //   item.eventId = item.id;
  //   item.start = item.start_time;
  //   item.end = item.end_time;
  //   return item;
  // });
  //目前的数据是用死的
  const evenstList = [
    {
      id: "1",
      title: "节假日1",
      start: "2025-08-29",
      end: "2025-08-29",
    },
    {
      id: "2",
      title: "双休日",
      start: "2025-08-29",
      end: "2025-08-29",
    },
    {
      id: "3",
      title: "双休日",
      start: "2025-08-29",
      end: "2025-08-29",
    },
    {
      id: "4",
      title: "双休日",
      start: "2025-08-29",
      end: "2025-08-29",
    },
    {
      id: "5",
      title: "北邮算力调度会",
      start: "2025-08-29",
      end: "2025-08-29",
    },
    {
      id: "6",
      title: "双休日",
      start: "2025-08-29",
      end: "2025-08-29",
    },
  ];

  matchList.value = [...evenstList];
  calendarOptions.value.events = matchList.value;
};
onMounted(() => {
  console.log(FullCalendarRef.value, "FullCalendarRef");

  init();
});
</script>

<style lang="less"></style>
